<!-- 工作巡查主页面 -->
<template>
  <div style="width: 100%; height: 100%">
    <!-- 巡查任务管理 -->
    <el-container class="home-qyda">
      <el-header class="header search-header">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline between-form"
          :label-width="100"
        >
          <div style="flex: 1">
            <el-form-item>
              <template #label>
                <span class="formTit">任务名称</span>
              </template>
              <el-input
                style="width: 200px; height: 40px; border-radius: 4px"
                v-model="formInline.taskName"
                placeholder="请输入"
                clearable
              />
            </el-form-item>

            <el-form-item>
              <template #label>
                <span class="formTit">下派人</span>
              </template>
              <el-select
                v-model="formInline.executantUser"
                clearable
                style="
                  width: 200px;
                  height: 40px;
                  background: #ffffff;
                  border-radius: 4px;
                "
              >
                <el-option
                  v-for="(item, index) in state.users"
                  :key="index"
                  :label="item.name"
                  :value="item.userId"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <template #label>
                <span class="formTit">巡查周期类型</span>
              </template>
              <el-select
                v-model="formInline.planType"
                clearable
                style="
                  width: 200px;
                  height: 40px;
                  background: #ffffff;
                  border-radius: 4px;
                "
              >
                <el-option
                  v-for="(item, index) in state.dminfo?.plan_type"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <template #label>
                <span class="formTit">巡查周期</span>
              </template>
              <el-select
                v-model="formInline.planPeriod"
                clearable
                style="
                  width: 200px;
                  height: 40px;
                  background: #ffffff;
                  border-radius: 4px;
                "
              >
                <el-option
                  v-for="(item, index) in state.dminfo?.plan_period"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </div>
          <div style="width: 250px">
            <el-form-item>
              <el-button type="primary" class="search-btn" @click="onQuery">
                查询
              </el-button>
              <el-button @click="onReset" class="reset-btn">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-header>
      <el-header class="header">
        <div class="header-l">
          <el-icon color="#2263BF"><Operation /></el-icon>
          <span class="text">任务列表</span>
        </div>
        <div class="header-r">
          <el-button link type="primary" class="self_btns" @click="addRole()">
            新增
          </el-button>
          <el-button
            link
            type="primary"
            class="self_btns"
            :disabled="!state.selectedItems.length"
            @click="handleBatchDelete"
          >
            批量删除
          </el-button>
        </div>
      </el-header>
      <el-main>
        <el-container>
          <el-main>
            <tableList
              :pagination="false"
              :tr-data="state.trData"
              :table-data="state.list"
              :currentPage="1"
              :pageSize="10"
              :total="100"
              bgColor="n"
              height="500px"
              @rowClick="rowClick"
              @selection-change="handleSelectionChange"
              :isMulti="true"
            >
              <template #caozuo>
                <el-table-column label="操作" width="300">
                  <template #default="scope">
                    <el-button link type="primary" @click="addRole(scope.row)">
                      <span
                        style="
                          font-family: PingFangSC, PingFang SC;
                          color: #6e8dfb;
                        "
                      >
                        编辑
                      </span>
                    </el-button>
                    <el-button link type="primary" @click="doDelete(scope.row)">
                      <span
                        style="
                          font-family: PingFangSC, PingFang SC;
                          color: #6e8dfb;
                        "
                      >
                        删除
                      </span>
                    </el-button>
                    <el-button
                      v-if="scope.row.planStateCode == '00'"
                      link
                      type="primary"
                      @click="assignBtn(scope.row)"
                    >
                      <span
                        style="
                          font-family: PingFangSC, PingFang SC;
                          color: #6e8dfb;
                        "
                      >
                        指派
                      </span>
                    </el-button>
                    <el-button
                      link
                      type="primary"
                      @click="delBtn"
                      v-if="scope.row.zt"
                    >
                      <span
                        style="
                          font-family: PingFangSC, PingFang SC;
                          color: #6e8dfb;
                        "
                      >
                        取消指派
                      </span>
                    </el-button>
                  </template>
                </el-table-column>
              </template>
            </tableList>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <el-dialog
      class="dialogSt"
      v-model="state.dialogVisible"
      title="新增巡查任务"
      width="1024"
      style="padding: 0; border-radius: 12px"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100"
        :size="formSize"
        style="
          width: 100%;
          margin-left: 0 !important;
          display: flex;
          align-item: top;
        "
        status-icon
      >
        <div style="width: 60%">
          <el-form-item label="任务名称" prop="taskName">
            <el-input
              style="height: 40px; width: 100%"
              v-model="ruleForm.taskName"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="任务内容" prop="describe">
            <el-input
              style="height: 40px; width: 670px"
              v-model="ruleForm.describe"
              placeholder="请输入"
            />
          </el-form-item>
          <div style="display: flex; justify-content: space-between">
            <el-form-item>
              <template #label>
                <span class="formTit">巡查周期类型</span>
              </template>
              <el-select
                v-model="ruleForm.planType"
                clearable
                style="
                  width: 480px;
                  height: 40px;
                  background: #ffffff;
                  border-radius: 4px;
                "
                @change="doPTchange()"
              >
                <el-option
                  v-for="(item, index) in state.dminfo?.plan_type"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex; justify-content: space-between">
            <el-form-item v-if="ruleForm.planType == '20'">
              <template #label>
                <span class="formTit">时间范围</span>
              </template>
              <!-- <span class="crtext" style="margin-right: 15px">时间范围</span> -->
              <el-date-picker
                style="width: 233px"
                v-model="ruleForm.planStime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="开始"
                clearable
              />
              <span style="margin: 0 1px">--</span>
              <el-date-picker
                style="width: 233px"
                v-model="ruleForm.planEtime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="结束"
                clearable
              />
            </el-form-item>
          </div>

          <el-form-item
            label="巡查有效期"
            v-if="ruleForm.planType == '10' || ruleForm.planType == '20'"
          >
            <el-select
              v-model="ruleForm.planPeriod"
              clearable
              style="
                height: 40px;
                width: 480px;
                background: #ffffff;
                border-radius: 4px;
              "
              @change="dochange()"
            >
              <el-option
                v-for="(item, index) in state.dminfo?.plan_period"
                :key="index"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="执行时间"
            v-if="ruleForm.planPeriod != 'ed' && ruleForm.planType == '01'"
          >
            <el-select
              v-model="ruleForm.dateList"
              clearable
              style="
                height: 40px;
                width: 480px;
                background: #ffffff;
                border-radius: 4px;
              "
            >
              <el-option
                v-for="item in state.maxdate"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="执行时间"
            v-if="ruleForm.planPeriod != 'ed' && ruleForm.planType != '01'"
          >
            <el-select
              v-model="ruleForm.dateList"
              clearable
              multiple
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="5"
              style="
                height: 40px;
                width: 480px;
                background: #ffffff;
                border-radius: 4px;
              "
            >
              <el-option
                v-for="item in state.maxdate"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="点位停留时长">
            <el-select
              v-model="ruleForm.duration"
              clearable
              style="
                height: 40px;
                width: 480px;
                background: #ffffff;
                border-radius: 4px;
              "
            >
              <el-option
                v-for="(item, index) in state.dminfo?.duration"
                :key="index"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </div>

        <div class="cskSty">
          <div class="cskLeftSty">
            <!-- <div class="titSty">全部点位 （3284）</div> -->
            <div class="titSty">全部点位</div>
            <div style="margin-top: 10px">
              <div style="padding-top: 20px">
                <el-input
                  style="width: 100%"
                  size="large"
                  v-model="searchKeyword"
                  placeholder="根据关键词搜索"
                  :suffix-icon="Search"
                />
                <div style="margin-top: 16px; height: 360px; overflow-y: auto">
                  <el-tree
                    ref="treeRef"
                    style="max-width: 600px"
                    class="filter-tree"
                    :data="state.trees"
                    default-expand-all
                    show-checkbox
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    node-key="nodeId"
                    @check-change="handleCheckChange"
                    :style="{ background: 'transparent' }"
                    :default-checked-keys="state.treesDefault"
                  >
                    <template #default="{ data }">
                      <span :title="data.nodeName">{{ data.nodeName }}</span>
                    </template>
                  </el-tree>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <template #footer>
        <div style="text-align: center; margin-bottom: 10px">
          <el-button
            style="
              background: rgba(14, 108, 255, 0.08);
              border: none;
              color: #293555;
              width: 100px;
            "
            type="primary"
            @click="resetForm(ruleFormRef)"
          >
            取消
          </el-button>

          <el-button
            style="width: 100px"
            type="primary"
            @click="submitForm(ruleFormRef)"
          >
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      class="dialogSt"
      v-model="state.dialogVisible_rolePz"
      title="分派"
      width="600"
      style="padding: 0; border-radius: 12px"
    >
      <el-form style="max-width: 600px; padding-left: 34px" status-icon>
        <el-form-item label="分派人员">
          <el-select
            v-model="formInline.users"
            clearable
            style="
              height: 40px;
              width: 350px;
              background: #ffffff;
              border-radius: 4px;
            "
          >
            <el-option
              v-for="(item, index) in state.users"
              :key="index"
              :label="item.name"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: center; margin-bottom: 10px">
          <el-button
            style="
              background: rgba(14, 108, 255, 0.08);
              border: none;
              color: #293555;
              width: 100px;
            "
            type="primary"
            @click="closeDialog()"
          >
            取消
          </el-button>

          <el-button style="width: 100px" type="primary" @click="dofp()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import confirm from "@/components/videoplan/confirm.vue";
import tableList from "@/components/videoplan/tableList.vue";
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getOrgsOnTreeView,
  getlistN,
  getparamdict,
  getlist,
  getupd,
  getassign,
  getRWdetail,
} from "@/api/videoplan.js";
import { da } from "element-plus/es/locale";
interface RuleForm {
  optType: string;
  planId: string;
  taskName: string;
  describe: string;
  planType: string;
  planStime: string;
  planEtime: string;
  planPeriod: string;
  dateList: [];
  duration: string;
  planState: string;
}
const defaultProps = {
  children: "childrens",
  label: function (data, node) {
    return data.nodeName;
  },
};

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  optType: "",
  planId: "",
  taskName: "",
  describe: "",
  planType: "",
  planStime: "",
  planEtime: "",
  planPeriod: "",
  dateList: [],
  duration: "",
  planState: "",
  routeInfos: [],
});

interface Tree {
  label: string;
  children?: Tree[];
}

const treeRef = ref(null);
const handleCheckChange = () => {
  let nodes = treeRef.value.getCheckedNodes();
  state.routeInfos = [];
  let sequence = 1; // 自增序号从1开始
  nodes.forEach((data, index) => {
    // 取非（判断tag为空或包含'org'）后判断摄像头的方法
    // data.tag == "" || data.tag.indexOf("org") > -1 说明是组织
    if (!(data.tag == "" || data.tag.indexOf("org") > -1)) {
      state.routeInfos.push({
        deviceId: data.nodeId,
        seq: sequence++, // 使用数组索引+1作为序号
      });
    }
  });
  console.log(" state.routeInfos", state.routeInfos);
};
// 搜索功能
const searchKeyword = ref("");
// 如果需要实现搜索功能
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.nodeName.includes(value);
};

watch(searchKeyword, (val) => {
  treeRef.value!.filter(val);
});
const rules = reactive<FormRules<RuleForm>>({
  taskName: [{ required: true, message: "请填写", trigger: "blur" }],

  describe: [
    {
      required: true,
      message: "请填写",
      trigger: "blur",
    },
  ],
});

const rowClick = (row: any) => {
  console.log(row, "点击的行数据");
};

const submitForm = async (formEl: FormInstance | undefined) => {
  console.log(ruleForm, "提交表单");
  if (!formEl) return;
  if (state.routeInfos.length == 0) {
    ElMessage.error("请选择摄像头");
    return;
  }
  if (ruleForm.planType == "20") {
    if (!ruleForm.planStime || !ruleForm.planEtime) {
      ElMessage.error("请选择时间范围");
      return;
    }
  }
  if (ruleForm.planType == "01") {
    if (!ruleForm.dateList) {
      ElMessage.error("请选择执行时间");
      return;
    }
    ruleForm.dateList = [ruleForm.dateList];
  }
  if (ruleForm.planPeriod != "ed") {
    if (ruleForm.dateList.length == 0) {
      ElMessage.error("请选择执行时间");
      return;
    }
  }

  if (!ruleForm.duration) {
    ElMessage.error("请选择点位停留时长");
    return;
  }

  if (ruleForm.dateList.length > 0) {
    ruleForm.dateList = ruleForm.dateList.map(String);
  }

  ruleForm.routeInfos = state.routeInfos;

  await formEl.validate(async (valid, fields) => {
    if (valid) {
      for (let item in ruleForm) {
        if (ruleForm[item] == "") {
          ruleForm[item] = undefined;
        }
      }
      if (ruleForm.planId) {
        ruleForm.optType = "U";
      } else {
        ruleForm.optType = "A";
        ruleForm.planState = "00";
      }

      let { data } = await getupd(ruleForm);
      ElMessage.success("计划提交成功");
      onQuery();
      state.dialogVisible = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  state.dialogVisible = false;
};

// 重置查询表单
const onReset = () => {
  formInline.taskName = "";
  formInline.executantUser = "";
  formInline.planType = "";
  formInline.planPeriod = "";
  onQuery();
};

const state = reactive({
  switch: 1,
  mychart: null,
  src: "/images/th.png",
  val: "是否确定删除?",
  dialog_tx: false,
  trData: [
    { prop: "index", label: "序号" },
    { prop: "taskName", label: "任务名称" },
    { prop: "planId", label: "任务ID" },
    { prop: "executantUser", label: "下派人" },
    { prop: "duration", label: "点位停留时长" },
    { prop: "createTime", label: "创建日期" },
  ],
  list: [{}],
  dialogVisible: false,
  dialogVisible_rolePz: false,
  checkList: [],
  dminfo: [],
  users: [],
  maxdate: 31,
  routeInfos: [],
  treesDefault: [],
  selArr: [],
  selectedItems: [] as any[], // 存储选中的行数据
});
const formInline = reactive({
  taskName: "",
  executantUser: "",
  planType: "",
  duration: "",
  users: "",
  planId: "",
  planPeriod: "",
});

// 处理批量删除
const handleBatchDelete = () => {
  if (state.selectedItems.length === 0) {
    ElMessage.warning("请先选择要删除的任务");
    return;
  }

  ElMessageBox.confirm("确定要删除选中的任务吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const deletePromises = state.selectedItems.map(async (item) => {
        const param = {
          optType: "D",
          planId: item.planId,
        };
        await getupd(param);
      });

      await Promise.all(deletePromises);
      ElMessage.success("删除成功");
      onQuery();
      state.selectedItems = [];
    })
    .catch(() => {
      // 用户取消删除
    });
};

// 处理单行选择变化
const handleSelectionChange = (selection: any[]) => {
  state.selectedItems = selection;
};

// 单个删除
const doDelete = (row: any) => {
  ElMessageBox.confirm("确定要删除该任务吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const param = {
        optType: "D",
        planId: row.planId,
      };
      await getupd(param);
      ElMessage.success("删除成功");
      onQuery();
    })
    .catch(() => {
      // 用户取消删除
    });
};
// 点击分派
const dofp = async () => {
  if (formInline.users && formInline.users.length > 0) {
  } else {
    ElMessage.error("请选择执行人！");
    return;
  }
  let { data } = await getassign({
    planId: formInline.planId,
    executantUserId: formInline.users,
  });
  ElMessage.success("操作成功！");
  closeDialog();
  onQuery(); // 分派成功后刷新列表
};
const onQuery = async () => {
  for (let item in formInline) {
    if (formInline[item] == "") {
      formInline[item] = undefined;
    }
  }
  console.log(formInline, "查询条件");
  let { data } = await getlist(formInline);
  state.list = data.inspectTaskList;
  let t = 0;
  state.list.forEach((el) => {
    t++;
    el.index = t;
    if (el.roleState == "启用") {
      el.zt = true;
    } else {
      el.zt = false;
    }
  });
};
const doPTchange = () => {
  ruleForm.dateList = [];
};
const dochange = () => {
  if (ruleForm.planPeriod == "ew") {
    state.maxdate = 7;
  }
  if (ruleForm.planPeriod == "em") {
    state.maxdate = 31;
  }
};

const assignBtn = (s) => {
  state.dialogVisible_rolePz = true;
  formInline.planId = s.planId;
};

// 新增+编辑
const addRole = async (s: any) => {
  console.log("执行了吗？", s);
  console.log(s ? s.planId : "新增任务", "计划ID");
  state.treesDefault = [];

  // 调用获取树的函数
  await getTree();

  if (s) {
    // 如果是编辑任务
    try {
      // 根据planId获取任务详情
      let { data } = await getRWdetail({ planId: s.planId });
      console.log(data, "任务详情");

      // 将任务详情回显到表单中
      ruleForm.planId = data.inspectPlanDetail.planId;
      ruleForm.taskName = data.inspectPlanDetail.taskName;
      ruleForm.duration = data.inspectPlanDetail.duration.toString();
      ruleForm.describe = data.inspectPlanDetail.describe;
      ruleForm.planType = data.inspectPlanDetail.planType;
      ruleForm.planStime = data.inspectPlanDetail.planStime;
      ruleForm.planEtime = data.inspectPlanDetail.planEtime;
      ruleForm.planPeriod = data.inspectPlanDetail.planPeriod;
      // 根据planType决定dateList的类型
      if (
        data.inspectPlanDetail.planType === "01" &&
        data.dateList.length > 0
      ) {
        ruleForm.dateList = data.dateList[0]; // 将数组的第一个元素作为字符串赋值
      } else {
        ruleForm.dateList = data.dateList.map(String); // 将数组元素转换为字符串
      }

      // 如果有选中的点位，更新treesDefault
      if (data.routeList && data.routeList.length > 0) {
        state.treesDefault = data.routeList;
      }
      // 处理routeInfos
      state.routeInfos = data.routeList
        ? data.routeList.map((item) => ({
            deviceId: item.deviceId,
          }))
        : [];
    } catch (e) {
      console.error(e);
      ElMessage.error("获取任务详情失败");
      return;
    }
  } else {
    // 如果是新增任务，重置表单
    ruleForm.planId = "";
    ruleForm.taskName = "";
    ruleForm.describe = "";
    ruleForm.planType = "";
    ruleForm.planStime = "";
    ruleForm.planEtime = "";
    ruleForm.planPeriod = "";
    ruleForm.dateList = [];
    ruleForm.duration = "";
  }

  // 打开新增/编辑任务对话框
  state.dialogVisible = true;
};

const closeDialog = () => {
  formInline.users = [];
  state.dialogVisible_rolePz = false;
};
const goRolePz = (row: any) => {
  state.dialogVisible_rolePz = true;
};

const getparamdictApi = async () => {
  try {
    let { data } = await getparamdict();
    state.dminfo = data;
  } catch (e) {
    console.error(e);
  }
};
const gettaggroupdef = async () => {
  try {
    let { data } = await getlistN();
    state.users = data.sysUsers;
  } catch (e) {
    console.error(e);
  }
};

const getTree = async () => {
  // state.trees = [];
  try {
    // let { data } = await getOrgsOnTreeView({ orgTreeId: "1001" });
    let { data } = await getOrgsOnTreeView({});
    console.log(data, "树");
    state.trees = data.deviceOrgTree || [];
    console.log(state.trees, "树");
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  onQuery();
  getparamdictApi();
  gettaggroupdef();
  getTree();
});
</script>

<style scoped lang="scss">
.grtjTop {
  background: linear-gradient(134deg, #e9effb 0%, #fbfcff 100%);
  box-shadow: 0px 2px 18px 0px rgba(185, 195, 219, 0.5),
    -4px -3px 10px 0px #ffffff;
  border-radius: 16px;
  padding: 20px 30px;
  width: 100%;

  .top_bot {
    .formSty {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
    }
    .top_tit {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #293555;
      line-height: 22px;
      padding-bottom: 14px;
      text-shadow: 0px 2px 18px rgba(185, 195, 219, 0.5);
      box-shadow: 1px 1px 2px 0px #ffffff;
      border-bottom: 1px solid #ccddf7;
    }
  }
  .formTit {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #293555;
    line-height: 40px;
  }
}

.grtjBot {
  width: 100%;
  height: calc(100vh - 150px - 80px - 55px);
  margin-top: 15px;
  background: linear-gradient(134deg, #e9effb 0%, #fbfcff 100%);
  box-shadow: 0px 2px 18px 0px rgba(185, 195, 219, 0.5),
    3px 3px 16px 0px rgba(159, 177, 206, 0.7), -4px -3px 10px 0px #ffffff;
  border-radius: 16px;
  padding: 20px 30px;
  flex: 1;
  .listTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    box-shadow: 1px 1px 2px 0px #ffffff;
    border-bottom: 1px solid #ccddf7;
  }
  .tit {
    font-weight: 600;
    font-size: 16px;
    color: #293555;
    line-height: 22px;
    text-shadow: 0px 2px 18px rgba(185, 195, 219, 0.5);
  }
  .list {
    margin-top: 10px;
  }
}

:deep(.el-menu) {
  background-color: rgba($color: #000000, $alpha: 0);
}
:deep(.el-menu--horizontal > .el-menu-item) {
  color: #293555;
  font-size: 16px;
  font-weight: 600;
}
:deep(.el-menu--horizontal.el-menu) {
  border-bottom: 1px solid #ccddf7;
  box-shadow: 1px 1px 2px 0px #ffffff;
}
:deep(.el-form--inline .el-form-item) {
  // margin-right: 10px;
  margin-bottom: 6px;
}

.dialogSt {
  font-family: PingFangSC, PingFang SC;
}
:deep(.el-dialog__header) {
  background: #2263bf;
  padding: 14px 20px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-dialog__headerbtn) {
  font-size: 24px;
  margin-top: 2px;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
}

:deep(.el-dialog__body) {
  padding: 16px 30px !important;
}

:deep() .el-dialog__footer {
  padding: 30px 0 20px;
  border-top: 1px solid #ccddf7;
  box-shadow: 0px 0px 0px 0px #ffffff !important;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

:deep(.el-form-item .asterisk-left) {
  align-items: center;
}
:deep(.el-select__wrapper) {
  height: 40px;
}
:deep(.el-form-item--default .el-form-item__label) {
  height: 40px;
  line-height: 40px;
}
:deep(.el-form-item__label-wrap) {
  margin-left: 0 !important;
}
.cskSty {
  width: 480px;
  margin-left: 60px;
  .cskLeftSty {
    background-color: #fff;
    border-radius: 4px;
    height: 500px;
    padding: 14px 0px;
  }
  .cskRightSty {
    background-color: #fff;
    width: 360px;
    border-radius: 4px;
    height: 500px;
    padding: 14px 20px;
  }
  .titSty {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #293555;
    line-height: 19px;
  }
}
</style>

<style lang="scss" scoped>
.home-qyda {
  width: 100%;
  height: 100%;
  .header {
    min-height: 36px;
    line-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 18px;
    .header-l {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        padding-left: 14px;
      }
    }
  }
}
.el-container {
  height: 100% !important;
  padding: 0 !important;
}
.el-header {
  height: auto !important;
  min-height: 36px !important;
}
.el-main {
  padding: 0 !important;
}
.search {
  margin: 0 50px;
}
.header-r {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
}
</style>

<style lang="scss">
.el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
.self_btns {
  color: #2263bf !important;
}
.level {
  display: inline-block;
  text-align: center;
  width: 60px;
  height: 26px;
  background: #e7f6ff;
  border-radius: 4px;
  border: 1px solid rgba(47, 173, 255, 0.32);
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #21adff;
  line-height: 26px;
  &.w {
    background: #ffe6e6;
    color: #ff2121;
    border: 1px solid rgba(255, 47, 47, 0.32);
  }
  &.z {
    background: #fff4e8;
    color: rgba(255, 160, 47, 1);
    border: 1px solid rgba(255, 160, 47, 0.32);
  }
}
</style>